<template>
    <!-- <div>
      <el-button type="primary" @click="handle">主要按钮</el-button>
      <el-button type="success" @click="xuan1">zrf主要按钮</el-button> 
    </div>-->
       <div class="login-container">
         <el-form ref="loginForm" :model="form" label-width="100px" :rules="rules" :inline="true">
         <h2>充电桩运营管理平台V1.0</h2>
          <h3>用户登录</h3>
            <el-form-item>
              <el-input placeholder="请输入账号" v-model="form.account" prefix-icon="el-icon-user"></el-input>
              <el-input type="password" placeholder="请输入密码" v-model="form.password" prefix-icon="el-icon-lock"></el-input>
              <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
              <a href="#" style="float: right;">忘记密码？</a>
               <el-button type="primary" @click="login()">登 录</el-button>
            </el-form-item>
        </el-form>
  </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    name: "UserListComponent", // 更改了组件名称以更好地反映其功能
     data() {
    return {
      rememberMe: false,
      form: {},
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
    methods: {
		login() {
       axios.post("/user/bdc/login",this.form).then(res => {
          if (res.data) {
           console.log("res");
           this.$router.push({
             path: '/home'
           });
         } else {
           this.$message.error("账号或密码错误");
         }
})
},
      handle() {
        getUserList().then(res => {
          if (res && res.data) {
            console.log("用户列表:", res.data);
            // 可以在这里做更多操作，比如更新组件内的用户列表
          } else {
            console.error("无效的响应数据");
          }
        }).catch(error => {
          console.error("获取用户列表失败:", error);
        });
      }
    }
  }
  </script>
  <style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #3262c2;
}

/* 添加以下样式以匹配图片 */
.el-form-item__label {
  font-size: 16px;
  color: #409eff;
}

.el-form-item {
  margin-bottom: 30px;
}

.el-form-item {
  margin-bottom: 20px;
  text-align: left;
}

.el-checkbox {
  margin-top: 10px;
}

.el-button {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  border-radius: 0;
  color: #fff;
  background-color: #409eff;
}

.el-button:hover {
  background-color: #5cb8ff;
}
h2,h3{
  text-align: center;
}
.el-form {
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  text-align: center;
}
.el-input {
  width: 100%;
  margin-bottom: 20px;
}

.el-input__inner {
  height: 40px;
  line-height: 40px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.el-input__prefix {
  top: 5px;
  color: #bfbfbf;
}










.el-button {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  color: #fff;
  background-color: #409eff;
  transition: background-color 0.3s ease;
}

.el-button:hover {
  background-color: #5cb8ff;
  cursor: pointer;
}
</style>